<!--
 * @Date: 2021-07-30 17:06:30
 * @LastEditTime: 2021-10-14 16:37:18
-->
<template>
  <div class="app-container">
    <!-- <el-button v-if="this.selectedIds.length" size="small" class="filter-item mb-5" type="danger" icon="el-icon-delete" @click="handleMultiDelete">
        批量删除
      </el-button> -->
    <div class="filter-container">
      <div class="mb10">
        <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch">
          <el-button size="mini" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
            搜索
          </el-button>
          <el-button size="mini" class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
            刷新
          </el-button>
        </form-selections>
      </div>
    </div>
    <div v-loading="loading">
      <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border fit @selection-change="handleSelectMulti">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column label="ID" prop="id" align="center" />
        <el-table-column prop="creator" label="操作人" />
        <el-table-column prop="module" label="操作模块" />
        <el-table-column prop="operate" label="操作菜单" />
        <el-table-column prop="route" label="菜单" />
        <el-table-column prop="method" label="请求方式" />
        <el-table-column prop="params" label="参数">
          <template slot-scope="data">
            <el-tooltip class="item" effect="dark" :content="data.row.params" placement="top-start">
              <el-tag type="success">查看</el-tag>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="操作时间">
          <template slot-scope="data">
            {{ formatLoginTime(data.row.created_at) }}
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination background class="pagination-container" :current-page="paginate.current" hide-on-single-page :page-sizes="paginate.sizes" :page-size="paginate.limit" :layout="paginate.layout" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> -->
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    </div>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import { parseTime } from '@/utils'
import cacheList from '@/layout/mixin/cacheList'
export default {
  name: 'SystemLogOperate',
  mixins: [formOperate, cacheList],
  data() {
    return {
      componentName: 'SystemLogOperate',
      url: 'log/operate',
      selectedIds: [],
      queryParam: {
        creator: '',
        module: '',
        method: ''
      },
      formItems: [
        {
          label: '操作人',
          key: 'creator',
          type: 'input',
          placeholder: '请输入操作人'
        },
        {
          label: '模块',
          key: 'module',
          type: 'input',
          placeholder: '请输入模块'
        },
        {
          label: '请求方式',
          key: 'method',
          type: 'select',
          options: [
            {
              label: 'GET',
              value: 'GET'
            },
            {
              label: 'POST',
              value: 'POST'
            },
            {
              label: 'PUT',
              value: 'PUT'
            },
            {
              label: 'DELETE',
              value: 'DELETE'
            }
          ]
        },
        // route
        {
          label: '菜单',
          key: 'route',
          type: 'input',
          placeholder: '请输入菜单'
        },
        {
          label: '菜单名称',
          key: 'operate',
          type: 'input',
          placeholder: '请输入菜单名称'
        }
      ]
    }
  },
  methods: {
    formatLoginTime(time) {
      return parseTime(time)
    }
  }
}
</script>
<style scoped>
.filter-container {
  border: none;
}
</style>
